<template>
  <div class="uploadFile">
    <input
      name="file"
      type="file"
      :id="id"
      @change="container"
      style="display:none"
      :multiple="multiple"
    />
    <label :for="id" class="txt imgUpload" v-if="uploadType == 'img'" ref="loadChange" >{{messages}}</label>
    <label :for="id" class="txt" ref="loadChange" v-else>
      {{messages}}
      <!-- <el-button size="small" type="primary">{{messages}}</el-button> -->
    </label>
    <!-- <el-button size="small" :for="id" class="txt" ref="loadChange" type="primary" v-else>{{messages}}</el-button> -->
  </div>
</template>
<style scoped lang="less">
.uploadFile {
  width: 100%;
  height: 100%;
}
.txt {
  // width: 100%;
  // height: 100%;
  display: inline-block;
  cursor: pointer;
  font-size: 14px;
  color: #587cf3 !important;
  text-align: center;
  // line-height: 100px;
}
.imgUpload {
  color: #919191;
  &:before {
    content: '+';
    display: block;
    width: 100%;
    height: 20px;
    font-size: 30px;
    font-weight: 300;
  }
  &:hover {
    color: #587cf3;
  }
}
</style>
<script>
import axios from "axios";
export default {
  data() {
    return {
      fileName: "",
      uploadParam: "",
      fileFormData: null,
      messages: this.message,
      messages_copy: this.message,
      id: Number(
        Math.random()
          .toString()
          .substr(3, 16) + Date.now()
      ).toString(36)
    };
  },
  watch: {
    message(val, oldVal) {
      console.log(val)
      this.messages = val;
      this.messages_copy = val;
    }
  },
  methods: {
    container(e) {
      // console.log(e.target.files.length);
      if (!this.multiple) {
        this.messages = "";
      }

      if (e.target.files.length > this.length) {
        this.$message.error(
          "您上传的图片不能大于" + this.length + "张 , 请重新上传 !"
        );
        return false;
      }
      for (let i of e.target.files) {
        this.update(i);
      }
    },
    update(file) {
      // 上传照片路径
      let index = file.name.lastIndexOf(".");
      let ext = file.name.substr(index + 1);
      let bool = false;
      let message = "";
      if (this.rules) {
        for (let i of this.rules) {
          if (i.rule instanceof Array) {
            for (let j of i.rule) {
              if (ext == j) {
                bool = true;
              }
            }
          } else {
            if (ext == i.rule) {
              bool = true;
            }
          }
          message = i.message;
        }
      } else {
        bool = true;
      }
      if (bool) {
        if (this.fileData) {
          this.fileFormData = file;
          // this.submitUpload(file);
        } else {
          this.submitUpload(file);
        }
        if (!this.multiple) {
          if (this.messages != "") {
            this.messages = this.messages + "   ,   " + file.name;
          } else {
            this.messages = this.messages + file.name;
          }
        }

        this.$emit("funLocal", {
          success: file
        });
      } else {
        this.$emit("fun", {
          error: message
        });
        this.$emit("funLocal", {
          error: message
        });
        this.messages = this.messages_copy;
      }
    },
    submitUpload(file) {
      if (!file) {
        file = this.fileFormData;
      }
      if (!file) {
        this.$message.error("请上传相关文件");
        return false;
      }
      var uploadParam = new FormData();
      //let url="http://39.96.58.238:9100/oss/uploadFileForDisk"

      if (this.fileData) {
        var url = this.fileData.url;
        let arr = this.fileData.data;
        for (let i = 0; i < arr.length; i++) {
          uploadParam.delete(arr[i].name);
          uploadParam.append(arr[i].name, arr[i].value);
        }
      } else {
        var url = "/zuul/oss/oss/uploadFileForDisk";
      }
      uploadParam.file = null;
      uploadParam.append("file", file, file.name);
      let self = this;
      axios({
        url: url,
        data: uploadParam,
        method: "post",
        onUploadProgress(progressEvent) {
          let complete =
            (((progressEvent.loaded / progressEvent.total) * 100) | 0) + "%";
          let obj = {
            size: (file.size / 1024).toFixed(2),
            name: file.name,
            progress: complete
          };
          self.$emit("progress", obj);
        }
      })
        .then(res => {
          if (res.data.status == 200) {
            let data = res.data.data
            // let data = Object.assign(file, res.data.data);
            this.$emit("fun", {
              success: data
            });
          } else {
            this.$emit("fun", {
              error: res.data.message
            });
          }

          var test = document.getElementById(this.id);
          test.value = "";
        })
        .catch(err => {
          var test = document.getElementById(this.id);
          test.value = "";
          this.$message.error("上传失败");
        });
    },

    clickUploadFile() {
      document.getElementById(this.id).click();
    }
  },
  props: [
    "message",
    "rules",
    "fun",
    "progress",
    "funLocal",
    "multiple",
    "length",
    "fileData",
    "uploadType",
  ]
};
</script>
